<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        form {
            margin: 50px auto;
            width: 500px;
            border: 3px solid rebeccapurple;
            display: flex;
            flex-direction: column;
            font-size: 30px;
            padding-top: 50px;
            position: relative;
        }

        form>span {
            position: absolute;
            top: 5px;
            transform: translateX(-50px);
            width: 100%;
            text-align: center;
            color: red;

            display: none;
        }

        form>label {
            height: 50px;
            margin: 20px;
        }

        form>label>input {
            font-size: 24px;
            height: 40px;
            padding-left: 20xp;
            width: 100%;
        }

        form>button{
            height: 40px;
            background: rebeccapurple;
            color: white;
            font-size: 24px;
            margin: 30px;
        }
    </style>
</head>

<body>
    <form action="">

        <span class="error">用户名密码错误</span>

        <label for="">
            用户名: <input type="text" class="username">
        </label>
        <label for="">
            密   码: <input type="password" class="password">
        </label>
        <button>登录</button>
    </form>

    <script>

        // 获取元素
        var loginForm = document.querySelector('form')
        // 获取用户名框
        var nameInp = document.querySelector('.username')
        // 获取密码框
        var pwdInp = document.querySelector('.password')
        // 获取错误提示文本
        var errBox = document.querySelector('.error')

        // 给form 标签绑定一个表单提交事件
        loginForm.onsubmit = function(e){
            //阻止表单的默认提交行为
            e.preventDefault()
            // console.log("发送ajax请求");
            // 拿到用户填写的用户名密码
            var name =nameInp.value
            var pwd =pwdInp.value

            // 严重用户名密码
            if(!name||!pwd) return alert('请完整填写表单')

            //  发送ajax请求
            var xhr = new XMLHttpRequest()
            xhr.open('POST',"",true)
            xhr.onload =function(){
                // 请求完成后
                var res = JSON.parse(xhr.responseText)
                // console.log(res);
                // 进行条件判断
                if(res.xode===0){
                    // 登录失败
                    errBox.style.dispaly='block'
                }else{
                    // 登录成功 跳转界面
                    window.location.href="./home.html"

                }

            }
            // post 带参数需要提前说明
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

            // post 携带参数是在请求体内
            xhr.send('name='+name+'&password='+pwd)

            console.log(name,pwd);
        }

    </script>

</body>

</html>